Design Token

Jina Aneeが提唱

Design Systemにおいて最小単位のstyleを定義するもの

予めプロジェクト内で使うDesignの要素を定義しておく

無尽蔵な中から色を選択するのではなく、予め用意された色を選択することで統一感を保てる

順序は知らないが、Tailwindでstylingする際に、smallとかでmarginの幅が決定することに近い

Figmaのようなデザインファイルと、実装のズレをなくすために使える

参考

デザイントークンとは？デザインシステムに関わる人が知っておきたいメリットや使い方まで - bagelee（ベーグリー）

わかりやすい

#WIP

Global token

割と数を列挙したもの

例

https://gyazo.com/3d31604c29daffd3951a7acdd1ea3e3f

Alias token

Global tokenの中から特によく使うものに別名を付けたもの

例えば、--red-700にerrorという名前をつけるなど

Design Tokenの対象の例

https://gyazo.com/24b7c20172f732247ebcf86cc5fed9e1

これはFigma Tokensで指定できるもののの一部

ここまでできるんだったら、

FigmaとStorybooksと、React Componentとtailwindを紐付けて

このCOmponentはFigmaのここに対応してます、とかできそう

そもそもTailwindを使うなら、Figma上のデザインをTailwindに合わせてもいいな

もちろん逆でもいい。というか普通は逆だろう

Figmaのルールに従って、Tailwindのルールを生成する

具体例

https://www.lightningdesignsystem.com/design-tokens/

https://spectrum.adobe.com/page/design-tokens/

https://hack.nikkei.com/blog/advent20201222/

https://blog.adobe.com/jp/publish/2021/03/29/cc-web-what-are-design-tokens

Design Tokenの考え方

https://www.designtokens.dev/

デザイントークンは色、余白、行間、Elevation(高さ)、フォント、フォントサイズ、シャドウ、アニメーション時間など複数のコンポーネントやテキスト要素にまたいで使われる情報を保存します。 ref

https://note.com/amishiratori/n/n261a796d87a6

https://zeroheight.com/blog/connecting-design-and-development-react-github-and-tokens/

zeroheight

具体例

プロダクトの背景色

https://github.com/salesforce-ux/theo

https://www.youtube.com/watch?v=1HREvonfqhY

Design Tokenの利用例

これはStyle Dictionaryを使っている

一箇所を変えれば、デザインファイルも、実装も変わっていることがわかる

https://www.youtube.com/live/Jn6nFEWDg50?si=QCxInJ0Oa9AEOK2v&t=1470